<template>
	<div>
		
		<div class="but">
			<!-- 返回上一页 -->
			<button class="back" @click="back">
				<van-icon name="arrow-left" size="18" color="#FFFFFF" />
			</button>
			<!-- 返回主页 -->
			<button class="gohome" @click="gohome">
				<van-icon name="wap-home-o" size="18" color="#FFFFFF" />
			</button>
		</div>
		
		<!-- 商品图片 -->
		<van-image
		  width="23.4375rem"
		  height="23.4375rem"
		  fit="cover"
		  :src="ware.pic"
		/>
		
		<div class="title">
			{{ ware.title }}
			<div class="">等级高，选取一芽一两叶，耐泡度可达8泡以上</div>
		</div>

		<div class="price">
			<span style="color: #D22531;">￥</span>
			<span class="pic"> {{ ware.price }} </span>
			<span style="color: #A699B3;">/150g</span>
			<div class="originalcost">价格: <span>￥198</span></div>
		</div>
		
		<!-- 底部购物车 -->
		<van-goods-action>
		  <van-goods-action-icon icon="cart-o" text="购物车" to='/cart'/>
		  <van-goods-action-button type="warning" text="加入购物车" @click="addCart(ware)"/>
		  <van-goods-action-button type="danger" text="立即购买" />
		</van-goods-action>
	
	</div>
</template>

<script>
	
	import {mapActions} from 'vuex';
	
	export default {
		name:'Ware',
		computed: {
			ware() {
				return JSON.parse(this.$route.query.ware)
			}
		},
		methods:{
			
			
			
			//返回上一级路由
			back(){
				this.$router.back()
			},
			
			//返回主页
			gohome(){
				this.$router.push({name:'home'})
			},
			
			//把商品数据放入购物车
			...mapActions('shoppingCart',['addCart'])
			
		}
	}
	
</script>

<style scoped>
	.but{
		width: 100vw;
		position: absolute;
		z-index: 999;
	}
	.back,.gohome {
		margin: 0.625rem;
		border: 0px;
		height: 1.875rem;
		width: 1.875rem;
		border-radius: 3.125rem;
	}
	.back {
		float: left;
	}
	.gohome {
		float: right;
	}
	.title {
		height: 2.375rem;
		padding: 0.6875rem;
		margin: 0;
		font-size: 1.0625rem;
		font-weight: 600;
		border-bottom: 1px solid #e1e1ee;
	}
	.title div{
		margin: 0.125rem;
		color: #A699B3;
		font-weight: 400;
		font-size: 0.875rem;
	}
	.price{
		height: 2.375rem;
		padding: 0.6875rem;
	}
	.pic{
		color: #D22531;
		font-size: 1.875rem;
		font-weight: 600;
	}
	.originalcost{
		color: #A699B3;
		font-size: 0.875rem;
	}
	.originalcost span {
		text-decoration: line-through;
	}
	
</style>